// 完成表单验证


function validateLogin() {
    //可以直接通过父元素.queryselector
    var div = document.querySelector("#loginId")
    var input = div.querySelector("input")
    var msg = div.querySelector(".msg")
    //错误消息
    var err = ''
    var loginvalue = input.value.trim()
    //为空
    if (!loginvalue) {
        err = '账号不能为空'
    } else if (
        loginvalue.length < 3 || loginvalue.length > 12
    ) {
        err = '账号是3-12位'
    }

    msg.innerText = err
    //判断是否有用错误
    div.className = err ? 'form-item err' : 'form-item'

    return !err
}

function validatePassword() {
    var div = document.querySelector("#passwordId")
    var input = div.querySelector("input")
    var msg = div.querySelector(".msg")
    //错误消息
    var err = ''
    var Password = input.value.trim()
    //为空
    if (!Password) {
        err = '密码不能为空'
    } else if (
        Password.length < 6 || Password.length > 16
    ) {
        err = '密码是6-16位'
    }

    msg.innerText = err
    //判断是否有用错误
    div.className = err ? 'form-item err' : 'form-item'

    return !err
}

// validateLogin()

function valateForm() {
    //v1v2先执行验证，&&具有短路规则如果判断是false就不会往下继续执行
    var v1 = validateLogin()
    var v2 = validatePassword() 
    return v1 && v2
} 


//注册事件
var loginInput = document.querySelector("#loginId input")
var passwordInput = document.querySelector("#passwordId input")

loginInput.addEventListener('input',validateLogin)
passwordInput.addEventListener('input',validatePassword)



//对默认的表单行为进行处理，如果没有值不能提交
var form = document.querySelector("form")
form.addEventListener('submit',function(e){
    //表示验证不通过,禁止默认的行为
    if(!valateForm()){
        e.preventDefault()
    }
})